<ion-header>
    <ion-toolbar color="light">
        <ion-buttons start >
            <button ion-button icon-only navPop>
                <ion-icon name="arrow-back" ></ion-icon>
            </button>
        </ion-buttons>
        <ion-title (click)="navto()">{{ 'Product.title' | translate }}</ion-title>
        <ion-buttons end >
            <button ion-button icon-only (click)="alert_active=true">
                <i class="iconfont icon-detail_share"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div class="content">
        <div class="content-img" (click)="show_title()">
            <img [src]="url_pre+info.logo" style="width:100%;">
            <a class="iconfont" (click)="collect()">
                <img [src]=" info.collect?'./assets/imgs/love_active.png':'./assets/imgs/love.png' " alt="">
            </a>
            
        </div>
        <div class="content-header-container">
            <div class="content-header" >
                <div class="content-header-padding" (ionScrollEnd)="isScrollToRight">
                    <div class="cell" (click)="show_map()">
                        <i class="iconfont icon-detail_map"></i>
                        <span>{{ 'Product.Map' | translate }}</span>
                    </div>
                    <div class="cell" (click)="show_street()">
                        <i class="iconfont icon-detail_street"></i>
                        <span>{{ 'Product.Street' | translate }}</span>
                    </div>
                    <div class="cell" (click)="show_floorplans()">
                        <i class="iconfont icon-detail_floorplans"></i>
                        <span>{{ 'Product.Floorplans' | translate }}</span>
                    </div>
                    <div class="cell" (click)="show_shool()">
                        <i class="iconfont icon-detail_schools"></i>
                        <span>{{ 'Product.Schools' | translate }}</span>
                    </div>
                    <!-- <div class="cell">
                        <i class="iconfont icon-post_photo"></i>
                        <span>{{ 'Product.view' | translate }}</span>
                    </div> -->
                    <div class="cell" (click)="video_active=true">
                        <i class="iconfont icon-post_video"></i>
                        <span>{{ 'Product.Videos' | translate }}</span>
                    </div>
                </div>
            </div>
            <ion-icon *ngIf="isRightIcon" class="hc-icon" name="arrow-round-forward"></ion-icon>
        </div>
        <div class="content-main">
            <div class="content-main-cell flex">
                <p><i class="iconfont icon-map_map"></i>{{info.address}}</p>
                <font>{{ _unit(info.price_unit) }} {{ info.price }}/{{ _type(info.price_type) }}</font>
            </div>
            <div class="content-main-cell">
                <p>{{ 'Product.Rent' | translate }}  {{ _unit(info.price_unit) }}{{ info.price }}/{{ _type(info.price_type) }}</p>
                <p>{{ 'Product.Deposit' | translate }}  {{ _unit(info.deposit_unit) }}{{ info.deposit_price }}</p>
                <p>{{ 'Product.Agentfees' | translate }}  {{ _unit(info.tax_unit) }}{{ info.tax_price }}</p>
                <p>{{ 'Product.Otherfees' | translate }}  {{ _unit(info.other_unit) }}{{ info.other_price }}</p>
            </div>
            <div class="content-main-cell">
                <h4>{{ 'Product.Basic' | translate }}</h4>
                <p>{{ info.living }} <i class="iconfont icon-detail_sofa"></i> , {{ info.bedroom }} <i class="iconfont icon-detail_bed"></i>&nbsp;,&nbsp;{{ info.bathroom }} <i class="iconfont icon-bad"></i> <br />{{ area }}{{ _aunit(area_unit) }}</p>
                <p>{{ 'Product.Flat' | translate }} {{ info.floor }}/{{ info.total_floor }} {{ 'Product.floor' | translate }} </p>
            </div>
            <div class="content-main-cell" *ngIf="!!info.is_share_info">
                <h4>{{ 'Product.Contact' | translate }}</h4>
                <p>{{ info.owner_name }}</p>
                <p>{{ 'Product.Tel' | translate }}: {{ info.owner_tel }}</p>
                <p>{{ 'Product.Email' | translate }}: {{ info.owner_email }}</p>
                <p>{{ info.address }}</p>
            </div>
            <div class="content-main-cell">
                <h4>{{ 'Product.Description' | translate }}</h4>
                <p>{{ info.description }}</p>
               
            </div>
            <div class="content-main-cell" *ngIf="have_funish_options!=[]">
                <h4>{{ 'Product.Features' | translate }}</h4>
                <div class="features-content">
                    <div class="features-cell" *ngFor="let item of have_funish_options">
                        <i [class]="funish_options[item-1]['ngclass']"></i>
                        <font>{{funish_options[item-1]['text']}}</font>
                    </div>
                </div>
            </div>
            <div class="content-main-cell review">
                <h4>{{ 'Product.Review' | translate }}
                    <span class="stars">
                            <i class="iconfont" [class.icon-star]="info.star>=1" [class.icon-star1]="info.star<1"></i>
                            <i class="iconfont" [class.icon-star]="info.star>=2" [class.icon-star1]="info.star<2"></i>
                            <i class="iconfont" [class.icon-star]="info.star>=3" [class.icon-star1]="info.star<3"></i>
                            <i class="iconfont" [class.icon-star]="info.star>=4" [class.icon-star1]="info.star<4"></i>
                            <i class="iconfont" [class.icon-star]="info.star>=5" [class.icon-star1]="info.star<5"></i>
                    </span>
                </h4>
                <div class="review-cell" *ngFor="let item of evaluate_list"> 
                    <div class="people-head">
                        <div class="img-container" [style.background-image]="'url('+src+item.uinfo.avatar+')'"></div>
                    </div>
                    <div class="people-content">
                        <h5>{{item.uinfo.firstname}}</h5>
                        <p>{{item.addtime}}</p>
                        <p>{{item.content}}</p>
                    </div>
                    <span class="stars float">
                            <i class="iconfont" [class.icon-star]="item.star>=1" [class.icon-star1]="item.star<1"></i>
                            <i class="iconfont" [class.icon-star]="item.star>=2" [class.icon-star1]="item.star<2"></i>
                            <i class="iconfont" [class.icon-star]="item.star>=3" [class.icon-star1]="item.star<3"></i>
                            <i class="iconfont" [class.icon-star]="item.star>=4" [class.icon-star1]="item.star<4"></i>
                            <i class="iconfont" [class.icon-star]="item.star>=5" [class.icon-star1]="item.star<5"></i>
                    </span>
                </div>
            </div>
            <div class="content-main-cell">
                <h4>{{ 'Product.Map' | translate }}</h4>
                <div class="map-content">
                    <div #map id="map_article"></div>
                    <div class="map-text" style="margin-top:8px;margin-bottom:8px;">
                        <p>Report suspicious information</p>
                        <div class="map-sign" (click)="report_active=true">
                            <div class="map-sign-container">
                                <i class="iconfont icon-detail_report"></i>
                                <font>{{ 'Product.report' | translate }}</font>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <img src="./assets/imgs/banner.png" alt="">
            </div>
        </div>
    </div>
    
</ion-content>
<ion-footer>
    <div class="footer">
        <span [navPush]="contactPage" [navParams]="toCancat">{{ 'Product.Contact' | translate }}</span>
        <span [navPush]="lookPage" [navParams]="{data:toCancat}">{{ 'Product.View' | translate }}</span>
        <!-- <span (click)="gopay()">{{ 'Product.Pay' | translate }}</span> -->
    </div>
</ion-footer>
<div class="alert_cell" *ngIf="report_active">
    <div class="alert_cell_content">
        <div class="alert_cell_input">
            <label class="input-radio" for="type_three">
                <input id="type_three" type="radio">
                <span><b></b></span>
                <font>{{ 'Product.option1' | translate }}</font>
            </label>
            <label class="input-radio" for="type_three">
                <input id="type_three" type="radio">
                <span><b></b></span>
                <font>{{ 'Product.option2' | translate }}</font>
            </label>
            <label class="input-radio" for="type_three">
                <input id="type_three" type="radio">
                <span><b></b></span>
                <font>{{ 'Product.option3' | translate }}</font>
            </label>
            <label class="input-radio" for="type_three">
                <input id="type_three" type="radio">
                <span><b></b></span>
                <font>{{ 'Product.option4' | translate }}</font>
            </label>
            <input type="text" >
        </div>
        <div class="alert_btns">
            <span style="border-right:solid 1px #E6E6E6;" (click)="report_active=false">{{ 'Product.Cancel' | translate }}</span>
            <span (click)="report_active=false">{{ 'Product.Submit' | translate }}</span>
        </div>
    </div>
    
</div>
<div class="alert_cell" *ngIf="alert_active">
    <div class="alert-cell-content">
        <div class="hc-scroll-content">
            <div class="scroll-content-item">
                <div class="icon-container"><i style="background-image: url(./assets/imgs/login_facebook.svg);"></i></div>
                <font>Facebook</font>
            </div>
            <div class="scroll-content-item">
                <div class="icon-container"><i style="background-image: url(./assets/imgs/login_instagram.svg);"></i></div>
                <font>Instagram</font>
            </div>
            <div class="scroll-content-item">
                <div class="icon-container"><i style="background-image: url(./assets/imgs/login_twitter.svg);"></i></div>
                <font>Twitter</font>
            </div>
            <div class="scroll-content-item">
                <div class="icon-container"><i style="background-image: url(./assets/imgs/login_wechat.svg);"></i></div>
                <font>Wechat</font>
            </div>
        </div>
    </div>
    <div class="alert-cell-btn">
        <button class="btn" (click)="alert_active=false">{{ 'Product.Cancel' | translate }}</button>
    </div>
</div>
<div class="alert_video" [class.active]="video_active" (click)="video_active=false">
    <div class="alert_video-content">
        <video [src]="url_pre+info.video" controls="controls" preload="metadata"></video>
    </div>
</div>